<!-- src/views/EditFood.vue -->
<template>
	<div class="wrapper">
		<header>
			<p>编辑商品</p>
		</header>

		<div class="form-container" v-if="isLoaded">
			<form @submit.prevent="submitForm">
				<div class="form-group">
					<label>商品名称</label>
					<input type="text" v-model="foodForm.foodName" required placeholder="请输入商品名称">
				</div>

				<div class="form-group">
					<label>商品描述</label>
					<textarea v-model="foodForm.foodExplain" placeholder="请输入商品描述"></textarea>
				</div>

				<div class="form-group">
					<label>商品价格</label>
					<input type="number" step="0.01" v-model.number="foodForm.foodPrice" required placeholder="请输入商品价格">
				</div>

				<div class="form-group">
					<label>商品图片URL</label>
					<input type="text" v-model="foodForm.foodImg" placeholder="请输入商品图片URL">
				</div>

				<div class="form-group">
					<label>备注</label>
					<input type="text" v-model="foodForm.remarks" placeholder="请输入备注信息">
				</div>

				<div class="form-actions">
					<button type="button" class="cancel-btn" @click="cancel">取消</button>
					<button type="submit" class="submit-btn">保存</button>
				</div>
			</form>
		</div>

		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'EditFood',
		data() {
			return {
				businessId: this.$route.query.businessId,
				foodId: this.$route.query.foodId,
				foodForm: {},
				isLoaded: false
			};
		},
		created() {
			const token = localStorage.getItem('id_token');
			if (!token) {
				this.$router.push('/login');
				return;
			}
			this.getFoodDetail();
		},
		components: {
			Footer
		},
		methods: {
			getFoodDetail() {
				const token = localStorage.getItem('id_token');
				this.$axios.get(`foods/${this.foodId}`, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						this.foodForm = result.data;
						this.isLoaded = true;
					} else {
						alert('获取商品详情失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('获取商品详情出错：', error);
				});
			},
			submitForm() {
				if (!this.foodForm.foodName || this.foodForm.foodPrice <= 0) {
					alert('请输入有效的有效的商品名称和价格');
					return;
				}

				const token = localStorage.getItem('id_token');
				this.$axios.put(`foods/${this.foodId}`, this.foodForm, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						alert('商品更新成功');
						this.$router.push({
							path: '/businessManage',
							query: {
								businessId: this.businessId
							}
						});
					} else {
						alert('更新失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('更新商品商品出错：', error);
				});
			},
			cancel() {
				this.$router.go(-1);
			}
		}
	};
</script>

<style scoped>
	/* 样式与AddFood保持一致 */
	.wrapper {
		width: 100%;
		min-height: 100%;
		background-color: #f5f5f5;
		padding-bottom: 14vw;
	}

	header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-container {
		padding: 3vw;
		margin-top: 15vw;
	}

	.form-group {
		margin-bottom: 4vw;
		background-color: #fff;
		padding: 3vw;
		border-radius: 1.5vw;
	}

	.form-group label {
		display: block;
		font-size: 3.5vw;
		color: #333;
		margin-bottom: 2vw;
	}

	.form-group input,
	.form-group textarea {
		width: 100%;
		padding: 3vw;
		font-size: 3.5vw;
		border: 1px solid #ddd;
		border-radius: 1vw;
		box-sizing: border-box;
	}

	.form-group textarea {
		min-height: 15vw;
		resize: vertical;
	}

	.form-actions {
		display: flex;
		justify-content: space-around;
		margin-top: 6vw;
	}

	.form-actions button {
		width: 40vw;
		padding: 3vw 0;
		font-size: 4vw;
		border-radius: 1.5vw;
		border: none;
		cursor: pointer;
	}

	.submit-btn {
		background-color: #0097EF;
		color: #fff;
	}

	.cancel-btn {
		background-color: #999;
		color: #fff;
	}
</style>